﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>逻辑连接绑定</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/llinkbindors.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/data.js"></script>
		<script type="text/javascript" src="../js/canvas.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
		#myCanvas{
			cursor: pointer !important;
			position:absolute !important;
			right:0px !important;
			bottom:0px !important;
		}

	</style>
	<script>
        window.onload = function() {
            var canvasData = {x:320 , y:150, width:Math.ceil(window.innerWidth-325), height:Math.ceil(window.innerHeight-100)};
            init_canvas(canvasData ,3, lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4);//初始化
            loadInfoData();
           // doLine(circles[circles.length-1] , circles[circles.length-2] , 3);
            drawCircles();
        };
        /**
         *加载初始化的东西
         */
        function loadInfoData(){
            for(var i = 0 ; i < apps_data.length ; i++){
                circles.push(apps_data[i]);
            }
        }
        /*添加APP*/
        function addOne(x , y , width , height , id , img ){
            var newObj = {x:x , y:y , width:width , height:height , id:id , img:img};
            circles.push(newObj);
            drawCircles();
        }
        /*function lineEvent1(obj1 , obj2){
            alert(obj1.comment+'连上了!'+obj2.comment);
        }*/
        function lineEvent1(obj1 , obj2){
            alert(obj1.id+'连上了!'+obj2.id);
        }
        function lineEvent2(obj1 , obj2){
            alert(obj1.id+'断开!'+obj2.id);
        }

		/*图标双击*/
        /*APP乙端口配置*/
        function iconEvent4(obj1) {
            alert("图标双击");
            /* var url = '';
            var param = {id:obj.id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data)
                }
            }); */
            var dataArr = [];
            for(i=1;i<=10;i++){
                var dataJson = {};
                dataJson.appName1 = i;
                dataJson.appName2 = "OX8E_"+i;
                dataJson.connName = i;
                dataJson.type = "141";
                dataArr.push(dataJson);
            }
            addDataPop(dataArr);
            $("#showInfo2").show();
            tableSum2();
        }
        function addDataPop(data){
            //alert(JSON.stringify(data));
            $(".contentTableDiv2 .popTbody2").empty();
            var html = '';
            $.each(data,function(k,v){
                html += '<tr>';
                html += '<td>'+v.appName1+'</td>';
                html += '<td>'+v.appName2+'</td>';
                html += '<td>'+v.connName+'</td>';
                html += '<td>'+v.type+'</td>';
                html += '</tr>';
            });
            $(".contentTableDiv2 .popTbody2").append(html);
        }
        /*应用连接配置栏*/
        /*线双击*/
        function lineEvent3(obj1,obj2){
            /* var url = '';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data)
                }
            }); */
            var dataArr = [];
            for(i=1;i<=10;i++){
                var dataJson = {};
                dataJson.id=i;
                dataJson.leftPort = i;
                dataJson.rightPort = i;
                dataJson.name = i;
                dataJson.type = i;
                dataArr.push(dataJson);
            }
            addDataPop2(dataArr);
            $("#showInfo").show();
            tableSum();

        }

        function addDataPop2(data){
            alert(JSON.stringify(data));
            $(".contentTableDiv .popTbody").empty();
            var html = '';
            $.each(data,function(k,v){
                html += '<tr>';
                html += '<td>'+v.leftPort+'</td>';
                html += '<td>'+v.rightPort+'</td>';
                html += '<td>'+v.name+'</td>';
                html += '<td>'+v.type+'</td>';
                html += '<td><div class="update app_text" style="cursor:pointer;" onclick="Update('+v.id+')">编辑</div><div class="delete" style="cursor:pointer;" onclick="Delete('+v.id+');">删除</div></td>\n';
                html += '</tr>';
            });
            $(".contentTableDiv .popTbody").append(html);
        }
        function tableSum2() {
            $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv2").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv2 table").css("width", "98%");
            }
            $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
        }
        function tableSum() {
            $(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv table").css("width", "100%");
            }
            $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
        }
        $(function(){
            tableSum();
            tableSum2
        });
        $(window).resize(function() {
            tableSum();
            tableSum2
        });
        function getScrollbarWidth() {
            var odiv = document.createElement('div'),//创建一个div
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'//让他有滚动条
                }, i, scrollbarWidth;
            for (i in styles) odiv.style[i] = styles[i];
            document.body.appendChild(odiv);//把div添加到body中
            scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
            odiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        }

	</script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}
	</style>
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu">拓扑文件库</div>
			<div class="left_menu">逻辑预案库</div>
			<div class="left_menu">部署库</div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
					<input type="hidden" id="curId" name="curId">
					<!-- 头部 -->
					<div class="top-bar">
<!--
						onclick="setDrawLine('crosshair' , lineEvent1 , lineEvent2)"
-->
						<div class="b1" clicktype = "1" style="cursor:pointer;" onclick="setDrawLine('crosshair' , lineEvent1 , lineEvent2,$(this))">
							<div>全单播</div>
							<div style="margin-left:10px;font-size:18px;">-----</div>
						</div>
						<div class="b3" clicktype = "1" style="cursor:pointer;" onclick="setDrawLine('crosshair' , lineEvent1 , lineEvent2,$(this))">
							<div>单播+全播</div>
							<div style="margin-left:10px;color:#04A0E9;font-size:18px;">-----</div>
						</div>

						<button class="b5" type="button">只看多播</button>
						<button  class="b6" type="button">保存</button>
					</div>


				<!-- 右侧 -->
					<div class="right">
						<div class="r0 app_text">APP</div>
						<div class="r1">
							<div  class="shadow"><img class="addApp" style="cursor:pointer;" src="../images/llinkbindors/addApp.png"></div>
							<div class="r-text">添加应用</div>
						</div>
						<div style="position:absolute;left:25px;bottom:15px;font-size:12px;text-align:center;">逻辑连接</div>
					</div>
					<!-- 左上 -->
					<div class="table-box" >
					</div>
				<!-- 底部 -->
				<div class="bottom">
					<div class="bt1"><img id="icon" src="../images/llinkbindors/1.png"></div>
					<div class="bt2">
						<div>名称&nbsp;:</div>
						<div><input type="text" id="appName" placeholder="输入名称"/></div>
					</div>
					<div class="bt3">
						<div>版本号&nbsp;:</div>
						<div><input type="text" id="appVersion" placeholder="输入版本号"></div>
					</div>
					<div class="bt4">
						<div>图标&nbsp;:</div>
						<div style="margin-left:20px;">
							<select style="width:100px;border:none;color:#BBBBBB;" id="appIcon">
								<option value="1">默认图标</option>
								<option value="2">2</option>
								<option value="3">3</option>
							</select>
						</div>
					</div>
					<div class="bt5">
						<div>备注&nbsp;:</div>
						<div style="position: absolute;left: 30px;right: 0px;height: 28px;"><input type="text" id="appRemark" placeholder="输入备注信息" style="width:90%;"></div>
					</div>
				</div>
			</form>
	</div>
	<!--APP乙端口配置-->
	<div class="pop_content2" id="showInfo2" style="display:none;">
		<div class="pop_block2">
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">APP乙端口配置</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
			<div class="headerTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
					<colgroup>
						<col width="25%">
						<col width="25%">
						<col width="25%">
						<col width="25%">
					</colgroup>
					<tr>
						<td><div>APP乙端口</div></td>
						<td><div>关联APP/端口</div></td>
						<td><div>连接名称</div></td>
						<td><div>连接类型</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv2">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
					<colgroup>
						<col width="25%">
						<col width="25%">
						<col width="25%">
						<col width="25%">
					</colgroup>
					<tbody class="popTbody2"></tbody>
				</table>
			</div>
		</div>
	</div>
	<!--应用连接配置栏-->
	<div class="pop_content" id="showInfo" style="display:none;">
		<div class="pop_block">
			<div class="pop_barInfo" >
				<div style="font-size: 18px;">应用连接配置栏</div>
			</div>
			<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>

			<div class="headerTableDiv">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tr>
						<td><div>APP甲端口</div></td>
						<td><div>APP乙端口</div></td>
						<td><div>连接名称</div></td>
						<td><div>连接类型</div></td>
						<td><div>操作</div></td>
					</tr>
				</table>
			</div>
			<div class="contentTableDiv">
				<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >
					<colgroup>
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<tbody class="popTbody">
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td><div class="update app_text">编辑</div><div class="delete">删除</div></td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="pop_input">
				<button class="addConn" type="button" onclick="addConn();">添加连接</button>
				<button class="s_save" type="button" onclick="save();">保存</button>
			</div>
		</div>
	</div>
	</body>
	<script type="text/javascript">

        function Delete(id) {
            alert("删除");
            aleret(id);
            var url="";
            $.post(url,{id:id},"JOSN").done(function(){

            });
        }
        function addConn() {
            alert("添加链接");
            var url="";
            var params={

			};
            $.post(url,params,"JOSN").done(function(){

            });
        }
        function save(id) {
            alert("保存");
            var url="save";
            var params={

			};
            $.post(url,{id:id},"JOSN").done(function(){

            });
        }
        function Update(id) {
            alert("编辑");
            aleret(id);
            var url="";
            $.post(url,{id:id},"JOSN").done(function(){

            });
        }
	/*选择图标*/
	$(function(){
	    $("#appIcon").on("change",function(){
            var selectVal=$("#appIcon").val();
            if(selectVal=="默认图标"){
                $("#icon").attr("src","../images/llinkbindors/1.png");
            }
            if(selectVal==2){
                $("#icon").attr("src","../images/llinkbindors/2.png");
            }
            if(selectVal==3){
                $("#icon").attr("src","../images/llinkbindors/3.png");
            }
		});
	});

	/*添加APP*/
	var count=0;
	$(".addApp").on("click",function(){
	    ++count;
	    alert(count);
        if(count>6){
            alert("您已经添加了6个,连接完再添加吧")
            count=0;
            return false;
        }
	   /* var url="";
	    var params={
	           name: $("#appName").val(),
			version: $("#appVersion").val(),
			   icon: $("#appIcon").val(),
			 remark: $("#appRemark").val()
		};
	    $.post(url,params,"JSON").done(function(data){
	        if(data){
                addOne((window.innerWidth - 395), 60*count, 50, 50, data.id, data.img);
			}
		});*/
		 addOne(window.innerWidth-395, 60*count, 50, 50, count, $("#icon").attr("src"));
	});
	
    function exit_pop(){
        $("#showInfo").hide();
	}
    function exit_pop2(){
        $("#showInfo2").hide();
    }

	</script>
</html>
